<template>
   <div class="update-container">
          <div class="update-top-container">
              <el-page-header @back="goBack" content="客房页面">
              </el-page-header>
          </div>
      <el-form  ref="form" status-icon  :rules="rules" :model="form" label-width="80px">
        <el-form-item label="編號" prop="username">
          <el-input v-model="form.username" style="width:54%"></el-input>
        </el-form-item>
        
         <el-form-item label="客房類型" prop="password">
          <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="狀態" prop="password">
          <el-input  v-model="form.password" style="width:54%"></el-input>
        </el-form-item>

         <el-form-item  label="樓層類型" prop="password">
          <el-select v-model="value1" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="標准价格" prop="password">
          <el-input  v-model="form.password" style="width:54%"></el-input>
        </el-form-item>

        <el-form-item label="折後价" prop="password">
          <el-input  v-model="form.password" style="width:54%"></el-input>
        </el-form-item>

          <el-form-item id="myform" label="普通會員价" prop="password">
          <el-input  v-model="form.password" style="width:54%"></el-input>
        </el-form-item>

         <el-form-item label="VIP會員价" prop="password">
          <el-input  v-model="form.password" style="width:54%"></el-input>
        </el-form-item>
        

        <div class="button-container-7">
          
            <el-button type="primary" @click="submit()" >提交</el-button>
          
        </div>
      </el-form>
    </div>
</template>

<script>
export default {
    name:'addUser',
    data() {
      return {
         choice:'新增用戶',
         IsOk:'',
         form: {
            username: '',
            password: '',
          },
          /**
           * @description
           * 客房類型......
           */
           options: [{
              value: '选项1',
              label: '双人房'
            }, {
              value: '选项2',
              label: '单人房'
            }, {
              value: '选项3',
              label: '四人房'
            }, {
              value: '选项4',
              label: '钟点房'
            }, {
              value: '选项5',
              label: '总统套房'
            }],
        value: '',
           
           /**
            * @description
            *  樓層類型...
            */
        options1: [{
              value: '选项1',
              label: '二楼'
            }, {
              value: '选项2',
              label: '三楼'
            }, {
              value: '选项3',
              label: '四楼'
            }, {
              value: '选项4',
              label: '五楼'
            }, {
              value: '选项5',
              label: '六楼'
            }],
         value1: ''
     }
    },
    methods: {
        async submit(){
          let that=this;
          //update....
          
         if(this.$route.query.do=='add'){
          //add
          console.log('add??');
          await this.$axios.get("http://localhost:8081/addUser?userName="+this.form.username+"&passWord="+this.form.password)
            .then((result) => {
                //console.log(result.data);
                that.$router.push({path:'/homepage/UserInfo',query:{status:result.data}})
                return;
            }).catch((err) => {
              
            });
           }
          else
          {
           await this.$axios.get("http://localhost:8081/updateUser?userId="+this.$route.query.userId+"&userName="+this.form.username+"&passWord="+this.form.password)
            .then((result) => {
                //console.log(result.data);
                that.$router.push({path:'/homepage/UserInfo',query:{status:result.data}})
              
               
            }).catch((err) => {
              
            });
          }
        },
        goBack(){
          this.$router.push('/homepage/roomInfo');
        },
        load(){
          //console.log(this.$route);
          if(this.$route.query)
          {
            this.form.username=this.$route.query.userName;
            this.form.password=this.$route.query.passWord;
          }
        }
    },
    mounted() {
      this.load();
    },

}
</script>

<style>

   .update-container{
     width: 80%;
     padding: 20px;
     position: relative;
     
   }
   .update-top-container{
     width: 100%;
     height: 50px;
     padding-left: 20px;
   }

   .el-form-item__content{
     width: 400px;
   }

    .button-container-7{
      position: absolute;
      left: 200px;
      top: 520px;
    }
     #myform .el-form-item__label{
       width: 200px;
     }
</style>